<script>
  import { onMount } from "svelte";
  import BScroll from "@better-scroll/core";
  import MouseWheel from "@better-scroll/mouse-wheel";
  import ScrollBar from "@better-scroll/scroll-bar";
  BScroll.use(MouseWheel);
  BScroll.use(ScrollBar);
  export let height = 0;
  let scroll, bs;
  const init = function () {
    bs = new BScroll(scroll, {
      probeType: 3,
      mouseWheel: {
        speed: 40,
        invert: false,
        easeTime: 300,
      },
      scrollY: true,
      scrollbar: {
        fade: false,
        minSize: 20,
      },
    });
    // bs.on("scrollStart", () => {
    //   console.log("scrollStart-");
    // });
    // bs.on("scroll", ({ y }) => {
    //   console.log("scrolling-", y);
    // });
    // bs.on("scrollEnd", (pos) => {
    //   console.log(pos);
    // });
  };
  export function refresh() {
    bs && bs.refresh();
  }
  onMount(() => {
    init();
  });
</script>

<div class="scroll-wrapper" style={`height: ${height}px`} bind:this={scroll}>
  <slot />
</div>

<style>
  .scroll-wrapper {
    overflow: hidden;
    position: relative;
  }
</style>
